@bedrock-layout/spacing-constants

@bedrock-layout/spacing-constants

Full docs at: bedrock-layout.dev

Spacing constants are the standard by which all spacing and layout decisions are made in the Bedrock Layout Primitives. They are the building blocks of the system and are used to create all other spacing values.

Bedrock Layout's spacing constants are based on the Open-props size scale.

Spacing constants

{
  space:{
    size000: "-.5rem",
    size00: "-.25rem",
    size1: ".25rem",
    size2: ".5rem",
    size3: "1rem",
    size4: "1.25rem",
    size5: "1.5rem",
    size6: "1.75rem",
    size7: "2rem",
    size8: "3rem",
    size9: "4rem",
    size10: "5rem",
    size11: "7.5rem",
    size12: "10rem",
    size13: "15rem",
    size14: "20rem",
    size15: "30rem",
  },
  sizes: {
    sizeContent1: "20ch",
    sizeContent2: "45ch",
    sizeContent3: "60ch",
    sizeHeader1: "20ch",
    sizeHeader2: "25ch",
    sizeHeader3: "35ch",
    sizeXxs: "240px",
    sizeXs: "360px",
    sizeSm: "480px",
    sizeMd: "768px",
    sizeLg: "1024px",
    sizeXl: "1440px",
    sizeXxl: "1920px",
  }
}

Integrating With Your Design System

Bedrock Layout Primitives is designed to be able to be integrated easily into any design system or style guide. Bedrock's Spacing values can be overridden using the ThemeProvider provided by @bedrock-layout/spacing-constants.

Bedrock Layout Primitives follow the System UI Theme Specification when overriding theme values. To override Bedrock Layout's default space values, you will need to pass in your new spacing values as an object of key/value pairs to the space key of the theme. For example, you can pass in the following object to override the default spacing values:

import { ThemeProvider } from '@bedrock-layout/spacing-constants';

const newSpacings = {
    "0x": 0,
    "1x":'45px',
    "3x":'100ch'
}

<ThemeProvider theme={{ space: newSpacings }}>
    <Stack gutter="1x">
     {...}
    </Stack>
</ThemeProvider>;

The spacing values can either be any valid CSS size unit or percentage written as a string, or a positive number for the number of pixels

Overriding Spacing Types in TypeScript

If you are in a TypeScript project you will also need to override the default types. The spacing types are overridden by defining your theme types through declaration merging. For example, to define the types of you newSpacings from the example above, we need to create a type declaration file, for example bedrock.d.ts, in the same directory as your index.tsx file where we define our new spacing types. This file will look something like this:

import type { CSSLength } from "@bedrock-layout/spacing-constants";

declare module "@bedrock-layout/spacing-constants" {
  export interface DefaultTheme {
    space: {
      "0x": number;
      "1x": CSSLength;
      "3x": CSSLength;
    };
  }
}

It is important to note that space values can only be of type string, CSSLength or number. CSSLength is the prefered type over string since it will validate that your string is in the format of ${number}${length-unit}. You can import the CSSLength type from the@bedrock-layout/spacing-constants package.

Note: If you use any other type for your space values, the types will revert back to Bedrock's default spacing types.

If you prefer to not to use the ThemeProvider and instead use CSS custom properties, you can simply pass in any custom property wrapped in var() to the gutter or padding prop, like this:

  <Stack gutter="var(--size-3)">
    {...}
  </Stack>

No spacing in your design system

In a perfect world we would only work on applications that have a well defined spacing system. However, there are many applications that do not have a well defined spacing system. For these applications, you can use any positive integer or valid CSSLength value for the spacing values.